<template>
  <app-container class="overview-container">
    <div v-for="(item, index) in data" :key="index" class="info-item">
      <span class="label">{{ item.label }}:</span>
      <span class="value">{{ item.value }}</span>
    </div>
  </app-container>
</template>

<script setup>
import { ref } from 'vue';

const content = {
  type: 'overview',
  data: [
    { label: '总事件数量', value: '13' },
    { label: '最高风险级别', value: '4' },
    { label: '主要攻击类型', value: 'T1059, T1082' },
    { label: '时间跨度', value: '2022-04-03 至 2025-04-08' },
    { label: '受影响资产', value: 'taomingwei-node3-ubuntu' }
  ]
};

const data = ref(content.data);
</script>

<style scoped>
.overview-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.label {
  font-weight: bold;
  color: #333;
  width: 200px; /* 根据需要调整宽度 */
}

.value {
  color: #666;
}
</style>